import { defineComponent, reactive, onMounted, watch } from 'vue';
import styles from './index.module.less';
import { VirtualList } from '@/../packages';

export default defineComponent({
    setup(props, context) {
        const state = reactive({
            total: 10000,
            list: [],
        });

        const setList = () => {
            const arr = [];
            for (let i = 1; i <= state.total; i++) {
                arr.push({ index: i, label: `label ${i}`, value: `value ${i}` })
            }
            state.list = arr;
        }

        watch(() => state.total, setList);

        onMounted(() => {
            setList();
        })

        return () => (<div class={styles.container}>
            <div class={styles.total}>
                数量：<input type="number" v-model={state.total} />
            </div>
            <div class={styles.innerContainer}>
                <VirtualList list={state.list}>
                    {{
                        itemRender: (data, key) => {
                            return <div>
                                <div>{data.label}</div>
                                <div>{data.value}</div>
                            </div>
                        }
                    }}
                </VirtualList>
            </div>
        </div>)
    },
})